<template>
    <div class="tableRow">
        <el-row class="select-list" v-permission="'system:online:query'">
            <el-form :model="queryParams" ref="queryForm" :label-position="'right'" label-width="80px" :inline="true" size="mini">
                <el-form-item label="登录地址" prop="ipaddr">
                    <el-input
                            v-model="queryParams.ipaddr"
                            placeholder="请输入登录地址"
                            clearable
                            size="small"
                            @keyup.enter.native="onSearch"
                            style="width: 200px"
                    />
                </el-form-item>
                <el-form-item label="用户名称" prop="userName">
                    <el-input
                            v-model="queryParams.userName"
                            placeholder="请输入用户名称"
                            clearable
                            size="small"
                            @keyup.enter.native="onSearch"
                            style="width: 200px"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
                    </el-button>
                    <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                               @click="onRefreshSelectForm">重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>

            <el-table
                    :data="data.slice((page.pageNum-1)*page.pageSize,page.pageNum*page.pageSize)"
                    class="dataTable"
            >
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{(page.pageNum - 1) * page.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="会话编号" align="center" prop="sessionId" :show-overflow-tooltip="true"/>
                <el-table-column label="登录名称" align="center" prop="loginName" :show-overflow-tooltip="true"/>
                <el-table-column label="部门名称" align="center" prop="deptName"/>
                <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true"/>
                <el-table-column label="登录地点" align="center" prop="loginLocation"/>
                <el-table-column label="浏览器" align="center" prop="browser"/>
                <el-table-column label="操作系统" align="center" prop="os"/>
                <el-table-column label="登录时间" align="center" prop="lastAccessTime" width="180"/>
                <el-table-column label="操作" align="center" class-name="small-padding">
                    <template slot-scope="scope">
                        <el-button
                                v-permission="'monitor:online:forceLogout'"
                                size="mini"
                                plain
                                type="danger"
                                icon="el-icon-delete"
                                @click="handleForceLogout(scope.row)"
                        >强退
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--region 分页-->
            <el-pagination class="pageRow" v-if="page" @size-change="handleSizeChange"
                           @current-change="handleIndexChange"
                           :page-size="page.pageSize"
                           :page-sizes="page.pageArray" :current-page="page.pageNum"
                           layout="total,sizes, prev, pager, next"
                           :total="page.total"/>
        </el-row>
    </div>

</template>
<script lang="ts">
    import {Component, Ref, Vue} from "vue-property-decorator";
    import {forceLogout, getOnlineList} from '@/api/online';

    @Component
    export default class Online extends Vue {
        @Ref("queryForm") private queryForm: any;
        // 表格数据
        data: any = [];
        // 查询参数
        queryParams: any = {
            ipaddr: undefined,
            userName: undefined
        };
        // 分页参数
        page: any = {
            // 总条数
            total: 0,
            pageNum: 1,
            pageSize: 10,
            pageArray: [10, 20, 50, 100]
        };

        // 切换每页显示的数量
        handleSizeChange(size: number) {
            if (this.page) {
                this.page.pageNum = 1;
                this.page.pageSize = size;
            }
        }

        // 切换页码
        handleIndexChange(pageNum: number) {
            if (this.page) {
                this.page.pageNum = pageNum;
            }
        }

        getData() {
            getOnlineList(this.queryParams).then((response: any) => {
                console.log(response);
                this.data = response.rows;
                this.page.total = response.total;
            }).catch((e) => {
                console.log(e);
            });
        };

        /** 搜索按钮操作 */
        onSearch() {
            this.page.pageNum = 1;
            this.getData();
        };

        /** 重置按钮操作 */
        onRefreshSelectForm() {
            this.queryForm.resetFields();
            this.onSearch();
        };

        /** 强退按钮操作 */
        handleForceLogout(row) {
            this.$confirm('是否确认强退名称为"' + row.loginName + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return forceLogout(row.sessionId);
            }).then((response: any) => {
                this.getData();
                this.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }


        mounted() {
            //页面加载完毕后执行的生命周期方法
            this.getData();
        }
    }
</script>

<style scoped lang="scss">
    .pageRow {
        margin: 10px;
        text-align: right;
        overflow: hidden;
    }
</style>

